<template>
    <div class="singer-out">
       <div class="singer-jieshao">
          <img :src="SingerInfo.cover" alt="">
          <div class="introduce">
             <h3>{{SingerInfo.name}}</h3>
             <div class="collect"><i class="iconfont icon-xihuan"></i> 收藏</div>
              <div class="p1">专辑: {{SingerInfo.albumSize}}</div>
              <div class="p1">单曲数:  {{SingerInfo.musicSize}}</div>
              <div class="p1">Mv: {{SingerInfo.mvSize}}</div>
          </div>
       </div>
       <div class="introduce-table">
          <div @click="index1=0" :class="{active:index1===0}">专辑</div>
          <div  @click="index1=1" :class="{active:index1===1}" style="margin:0 20px">Mv</div>
          <div  @click="index1=2" :class="{active:index1===2}">歌手详情</div>
       </div>
       <div v-if="index1===0">
  <div class="singerHot">
         <img src="@/assets/img/topSongsLogo.png" alt="">
         <div class="singerHot-right ">
           <h3>热门50首</h3>
           <div class="hotout" :class="{hotwidth:hotwidthnum==true}">
             <div class="singerHot-right-item" @dblclick="passId(item,TopSonglist)"  v-for="(item,index) in TopSonglist" :key="index">
             <span ><i class="leftspan">{{index+1}}</i> <i>{{item.name}}</i></span><span style="margin-right:10px">{{item.ar[0].name}}</span>
           </div>
           </div>
           <div style="color:#aaa;font-size:14px;" @click="hotwidthnum=!hotwidthnum">{{hotwidthnum==true?'查看更多':'收起全部'}}</div>
         </div>
       </div>
   <!-- 专辑 -->
 <div class="singerHot-bottom"  v-for="(item,i)  in albumlist" :key="i">
         <img :src="item.album.blurPicUrl" alt="" @click="skipRouter(item)">
         <div class="singerHot-right " >
           <h3>{{item.album.name}}</h3>
           <div class="hotout" >
             <div class="singerHot-right-item" @dblclick="passId(item2,item.songs)"   v-for="(item2,index) in item.songs" :key="index">
             <span ><i class="leftspan">{{index+1}}</i> <i>{{item2.name}}</i></span><span style="margin-right:10px">{{item2.ar[0].name}}</span>
           </div>
           </div>
         </div>
       </div>
       </div>
    <div class="singerMv" v-if="index1===1" >
      <div class="singerMv-item" v-for="(item,i) in singerMvs" :key="i">
          <img :src="item.imgurl" alt="" @click="$router.push(`/Mvdetails?id=${item.id}`)">
          <div>{{item.name}}</div>
      </div>
    </div>
    <div class="jieshao" v-if="index1===2" style="margin-top:20px;text-indent:2em;line-height:1.8;font-size:14px;">
       {{SingerInfo.briefDesc}}
    </div>
    </div>
</template>
<script>
import dayjs from 'dayjs'
   export default{
     name:'singerDetail',
     data(){
       return {
          index1:1,
          hotwidthnum:true,
          TopSonglist:[],
          albumlist:[],
          SingerInfo:{},
          singerMvs:[],
          count:1,
       }
     },
     mounted(){
       this.getTopSong()
        this.getSingerdetail()
        this.getAlbum()
        this.getSingerMv()
        window.addEventListener("scroll",this.scrollDs(this.getSingerMv,3000))
     },
     methods:{
         async getAlbum(){  //获取专辑
           const {data:res}=await this.$request("/artist/album",{
             id:this.$route.query.id
           })
          //  this.albumlist=res.hotAlbums
           res.hotAlbums.forEach(x=>{
              this.getAlbumDetail(x.id);
           })
          //  this.getAlbumDetail(item.id);
           console.log(res)
          },
           async getSingerdetail(){ //获取歌手详情 
           const res=await this.$request("/artist/detail",{
             id:this.$route.query.id
           })
          this.SingerInfo=res.data.data.artist
          },
            async getTopSong(){ //获取歌手热榜50首
           const {data:res}=await this.$request("/artist/top/song",{
             id:this.$route.query.id
           })
          //  console.log(res)
           this.TopSonglist=res.songs
         },
             async getAlbumDetail(id){ //获取歌手专辑详情
           const {data:res}=await this.$request("/album",{
             id:id
           })
           this.albumlist.push(res)
         },
            async passId(item,Muisclist){  //播放歌曲
            console.log(item.dt)
       const {data:res} =await this.$request("/song/url",{
         id:item.id
       })
        var time=dayjs(item.dt).format('mm:ss')
       console.log("打印事件",time)
       if(res.code!=200) return 
       var data={
           url:res.data[0].url,
           time:time,
           id:res.data[0].id,
           img:item.al.picUrl,
           name:item.name,
           nickName:item.ar[0].name
       }
       console.log(res)
      this.$Store.commit("passUrl",data)
      this.$Store.commit("Muisclist",Muisclist)
      },
          skipRouter(item){
            console.log(item)
         this.$router.push(`/MusicDetails?id=${item.album.id}`)
       },
       //获取歌手Mv /artist/mv
        async getSingerMv(){ //获取歌手专辑详情
           const {data:res}=await this.$request("/artist/mv",{
             id:this.$route.query.id,
             limit: 10*this.count
           })
           console.log(res)
           this.count++
           this.singerMvs=[...this.singerMvs,...res.mvs]
         },
        scrollDs(fn,delay){
          let last=0;
          return function(){
             let noew= +new Date()
             if((noew-last)>delay){
                 last=noew
                fn()
             }
          }
        }
     },
 
   }
</script>
<style lang="less" scoped>
    .singer-out{
       width: 1300px;
       display: flex;
       padding:70px 0 80px 140px;
       flex-direction:column;
       .singer-jieshao{
         width:100%;
         display:flex;

           img{
             width:160px;
             height:160px;
             border-radius:10px;
           }
           .introduce{
             padding-left:10px;
             display:flex;
             flex-direction:column;
             justify-content:space-between;
              .collect{
                width:100px;
                height:25px;
                line-height:25px;
                border:1px solid #ccc;
                border-radius:10px;
                text-align:center;
              }
              .p1{
                font-size:13px;
                color:black;
              }
           }
       }
       .introduce-table{
         display:flex;
         margin-top:40px;
         .active{
           border-bottom:3px solid red;
           color:black;
           font-weight:600;
           height:25px;
         }
       }
       .singerHot-bottom{
          width:100%;
         display:flex;
         margin-top:40px;
         height:100%;
         position: relative;
         img{
           width:180px;
           height:180px;
           border-radius:10px;
         }
            .hotwidth{
             height:300px;
             overflow:hidden;
          }
         .singerHot-right{
            width:100%;
           padding-left:20px;
            color:black;
         
            h3{
              margin-bottom:10px;
            }
          .singerHot-right-item:nth-child(odd){
            background-color:#ccc;
          }
            .singerHot-right-item{
              font-size:14px;
               width:100%;
              border-radius:6px;
               height:30px;
               line-height:30px;
               text-align:center;
               display:flex;
               justify-content:space-between;
               .leftspan{
                 width:35px;
                   padding:0;
                  display:inline-block;
                   text-align:center;
               }
                i{
                 padding-left:10px;
                 font-style:normal;
               }
               
           }
         }
       }
           .singerHot{
          width:100%;
         display:flex;
         margin-top:40px;
           h3{
              margin-bottom:10px;
            }
         img{
           width:180px;
           height:180px;
           border-radius:10px;
         }
            .hotwidth{
             height:300px;
             overflow:hidden;
          }
         .singerHot-right{
            width:100%;
           padding-left:20px;
            color:black;
       
          .singerHot-right-item:nth-child(odd){
            background-color:#ccc;
          }
            .singerHot-right-item{
              font-size:14px;
               width:100%;
              border-radius: 6px;
               height:30px;
               line-height:30px;
               text-align:center;
               display:flex;
               justify-content:space-between;
               .leftspan{
                 width:35px;
                   padding:0;
                  display:inline-block;
                  //  border:1px solid #ccc;
                   text-align:center;
               }
                i{
                 padding-left:10px;
                 font-style:normal;
               }
               
           }
         }
       }
       .singerMv{
         margin-top:20px;
         display:flex;
         flex-wrap:wrap;
         .singerMv-item{
           width:25%;
           margin-bottom:20px;
           img{
             width:90%;
             height:160px;
             border-radius:10px;
           }
           div{
             padding:5px 10px;
           }
         }
       }
    }
</style>